<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-06-18 16:31:21
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-row>
                    <el-col :span="24" style="display: flex;justify-content:flex-end">
                        <el-button type="success" :icon="Plus" size="small" @click="addNewProcess">新建流程</el-button>
                    </el-col>
                </el-row>
                <div :style="`height:${view.height - 225}px;`" class="process-list-con" v-loading="tableLoading">
                    <el-card class="process-card" style="max-width: 200px;" v-for="(item, index) in tableData">
                        <template #header>
                            <p style="display: flex;justify-content:space-between;align-items: center;">
                                <el-button type="primary" size="small" text :icon="Edit"
                                    @click="enterToGraph(item)">编辑流程</el-button>
                                <el-popconfirm title="确定要删除当前流程及流程下算法么?" @confirm="deleteProcess(item.id)">
                                    <template #reference>
                                        <el-button type="danger"  size="small" text :icon="Delete" />
                                    </template>
                                </el-popconfirm>
                            </p>
                        </template>
                        <el-image :src="graph_cover" style="width: 100%;" />
                        <template #footer>
                            <p style="display: flex;justify-content:space-between;align-items: center;">
                            <p class="process-name-con" :title="item.name">
                                {{ item.name }}
                            </p>
                            <el-button type="success" size="small" text :icon="VideoPlay" @click="executeGraph(item)">
                                流程执行</el-button>
                            </p>
                            <p class="tine">{{ item.createDate }}</p>
                        </template>
                    </el-card>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import {
    Delete,
    Edit,
    VideoPlay,
    Plus
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
import graph_cover from '@/assets/img/graph_cover.png'
import new_graph from '@/assets/img/newGraph.png'

import HttpService from "@/api/api";
// import * as _ from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";

let processListPagination = reactive({
    page_index: 1,
    page_size: 15,
    page_total: 0,
});
let keyword = ref('')
let tableData = ref([])
let tableLoading = ref(false)

const router = useRouter()

onMounted(() => {

});
var view = reactive({
    height: window.innerHeight,
});

const getprocessList = function () {
    let params = {
        page_size: processListPagination.page_size,
        page_index: processListPagination.page_index,
        keyword: keyword.value
    };
    tableData.value.length = 0;
    tableLoading.value = true
    HttpService.processListManage.getprocessList(
        params,
        (res) => {

            if (res.status == 200) {
                res.data.data.map((item, index) => {
                    tableData.value.push(item);
                    tableLoading.value = false
                });
                processListPagination.page_total = res.data.total
            } else {
                console.log("获取信息失败" + res);
                tableLoading.value = false
            }
        },
        (error) => {
            console.log(error);
            tableLoading.value = false
        }
    );
};




const enterToGraph = function (process) {
    router.push('/index/general/processManage/processGraph/' + process.id)
}
const executeGraph = function (process) {
    router.push('/index/general/processManage/executeGraph/' + process.id)
}

const addNewProcess = function () {
    router.push('/index/general/processManage/processGraph/newGraph')
}
const deleteProcess = function (id) {
    let params = {
        id
    };
    HttpService.processListManage.deleteProcess(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: res.data.message,
                    type: 'success',
                })
                getprocessList()
            } else {
                console.log("获取信息失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}



getprocessList()

/* window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100); */

</script>
<style lang="scss" scoped>
.process-list-con {
    margin-top: 20px;
    overflow: auto;

    .process-card {
        margin: 0 5px 20px 5px;
        height: 260px;
        float: left;
        .tine {
            color: #999;
            margin: 5px 0;
            font-size: 12px;
        }

        .process-name-con {
            width: 150px;
            overflow: hidden;
            /*溢出部分隐藏*/
            white-space: nowrap;
            /*文本不换行*/
            text-overflow: ellipsis;
            /*当对象内文本溢出时显示省略标记（...）*/
            cursor: pointer;
        }
    }
}
</style>
<style lang="scss">
.process-card {
    .el-card__header {
        padding: 5px !important;
    }

    .el-card__body {
        padding: 0px;
    }

    .el-card__footer {
        padding: 5px;
    }
}
</style>